<template>
	<view class="page">
		<view class="nav_bar" :style="`background-color: rgba(255, 255, 255, ${trans});`">
			<uni-nav-bar :color="color" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>

		<view class="header" :id="images.length ? '' : 'empty'">

			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in images" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="swiper-dot flex_center">

				<view class="upload-images flex_c" @click="choosePhotos">
					<view class="flex_c">
						<u-icon name="plus" color="#FFF" size="28rpx" bold></u-icon>
						<text>上传商品</text>
					</view>
				</view>

				<view class="swiper-dot-flex-box">
					<scroll-view scroll-x="true">
						<view class="swiper-dot-list flex_center">
							<view class="item" v-for="(item,index) in images" :key="index"
								:id="index == current ? 'select' : ''" @click="current = index">
								<image :src="item" mode="aspectFill"></image>

								<view class="swiper-dot-icon" @click.stop="onDetele(index)">
									<u-icon name="close-circle-fill" size="32rpx" color="#FD2A53"></u-icon>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

		</view>

		<view class="body">
			<view class="title flex_r_between">
				<view>详情图</view>
			</view>

			<view class="images_list flex_center">
				<view class="image_box" v-for="(item,index) in content_images" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<view class="delete_icon" @click="onDeleteImage(index)">
						<u-icon name="close-circle-fill" size="36rpx" color="#FD2A53"></u-icon>
					</view>
				</view>
				<view class="add flex_r_around" @click="chooseImages" v-if="content_images.length < 9">
					<uni-icons type="plusempty" color="#666666" size="24"></uni-icons>
				</view>
			</view>

			<view class="goods_input flex_center">
				<text>商品名称</text>
				<input type="text" placeholder="请输入" placeholder-class="input-placeholder" v-model="info.name" />
			</view>

			<view class="textarea">
				<textarea maxlength="500" placeholder-class="input-placeholder" placeholder="请输入您的商品介绍"
					v-model="info.profile"></textarea>
			</view>

			<view class="goods_input flex_center">
				<text>商品价格</text>
				<input type="digit" placeholder="请输入" placeholder-class="input-placeholder" v-model="info.price"
					@input="checkPrice" />
				<view class="text">元</view>
			</view>

			<view class="goods_input flex_center">
				<text>库存</text>
				<input type="text" placeholder="请输入" placeholder-class="input-placeholder" v-model="info.stock" />
			</view>

			<view class="goods_input flex_center" @click="show = true">
				<text>商品分类</text>
				<view class="value hidden">
					{{ tab_nav_name }}
				</view>
				<u-icon name="arrow-down-fill" color="#979797" size="24rpx"></u-icon>
			</view>

			<view class="goods_input flex_center">
				<text>是否支持7天无理由退货</text>
				<view class="select flex_center">
					<view class="item flex_center" @click="info.reason_return = 1">
						<image :src="$util.prefix(`public/select_q${info.reason_return == 1 ?'_s' : ''}.png`)"
							mode="aspectFill"></image>
						<text>是</text>
					</view>

					<view class="item flex_center" @click="info.reason_return = 0">
						<image :src="$util.prefix(`public/select_q${info.reason_return == 0 ?'_s' : ''}.png`)"
							mode="aspectFill"></image>
						<text>否</text>
					</view>
				</view>
			</view>

			<view class="goods_input flex_center" @click="show_trans = true">
				<text>快递方式</text>
				<view class="value hidden">
					{{ info.express_type == 1 ? '到店使用' : info.express_type == 2 ? '送货上门' : '快递邮寄'  }}
				</view>
				<u-icon name="arrow-down-fill" color="#979797" size="24rpx"></u-icon>
			</view>

			<button @click="onSubmit">发布</button>


		</view>

		<u-picker keyName="name" :show="show" ref="uPicker" :columns="columns" @cancel="show = false"
			 @confirm="onColumnsComfirm"></u-picker>

		<u-action-sheet :actions="list" title="" description="请选择快递类型" cancelText="取消" round="24rpx" :show="show_trans"
			@cancel="show_trans = false" @close="show_trans = false" @select="onTrans"></u-action-sheet>

		<w-compress ref='wCompress' />


	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	export default {
		components: {
			WCompress,
		},
		data() {
			return {
				trans: 0,
				color: '#FFF',

				current: 0,
				images: [],
				content_images: [],

				// 商品储存信息
				info: {
					id: 0,
					// 图片
					image: '',
					goods_image: '',
					// 商品详情图
					content_images: '',

					// 分类
					tab_nav_id: 0,
					// 价格
					price: '',
					// 简介
					profile: '',
					// 名称
					name: '',

					// 快递方式
					express_type: 1,

					// 库存
					stock: '',

					// 是否支持7天无理由退货:0=不支持,1=支持
					reason_return: 1,

				},

				status: 0,



				// 商家分类
				show: false,
				tab_nav_name: '',
				columns: [
					[],
				],
				// 分类储存区
				storeType: [],


				// 上门方式
				show_trans: false,
				list: [{
						name: '到店使用',
						express_type: 1,
					},
					{
						name: '送货上门',
						express_type: 2,
					},
					{
						name: '快递邮寄',
						express_type: 3,
					}
				],
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},

			// 限制两位小数
			checkPrice(e) {
				let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.info.price = num;
				});
			},

			getProductTags() {
				this.$get('/store.store_category/getStoreCategory').then(res => {
					this.storeType = res.data;
					res.data.forEach((element) => {
						this.columns[0].push({
							"name": element.name,
							"pid": element.pid,
							"id": element.id,
						});
					})
				})
			},

			onColumnsComfirm(e) {
				this.tab_nav_name = e.value[0].name;
				this.info.tab_nav_id = e.value[0].id;
				this.show = false;
			},
			
			onDetele(index) {
				this.images.splice(index,1);
			},

			chooseImages() {
				this.$native.authorize('photos');
				var count = 9 - this.content_images.length;
				uni.chooseImage({
					count: count,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.content_images.push(res.result.url)
									} else {
										this.$util.msg(res.msg)
									}
								})
							})

						})
					},
					fail: (err) => {
						// this.$util.msg(`${err.errMsg}----${err.errCode}`);
					}
				})
			},

			onDeleteImage(index) {
				this.content_images.splice(index, 1);
			},

			onTrans(e) {
				this.info.express_type = e.express_type;
			},

			choosePhotos() {
				this.$native.authorize('photos');
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					crop: {
						width: 500,
						height: 500
					},
					success: (file) => {
						uni.navigateTo({
							url: `/pages/index/cropper?src=${file.tempFilePaths[0]}&width=375&height=214`,
							events: {
								getImage: (data) => {
									this.images.push(data.src);
								}
							}
						});
					},
					fail(err) {
						this.$util.msg(err)
					}
				})
			},

			onSubmit() {

				if (!this.info.name) {
					return this.$util.msg('请输入商品名称')
				}

				if (!this.images.length) {
					return this.$util.msg('请添加商品图片')
				}

				if (!this.content_images.length) {
					return this.$util.msg('请添加商品详情图')
				}

				if (!this.info.tab_nav_id) {
					return this.$util.msg('请添加商品分类')
				}

				if (!this.info.price) {
					return this.$util.msg('请添加商品价格')
				}

				if (!this.info.profile) {
					return this.$util.msg('请添加商品描述')
				}


				this.info.image = this.images[0];
				this.info.goods_image = this.images.join(',');
				this.info.content_images = this.content_images.join(',');
				this.$post('/store_goods/saveGoods', this.info).then(res => {
					this.$util.msg(res.msg);
					this.$util.back();
				})
			},

			getInfo() {
				this.$get(`/store_goods/getGoodsInfo`, {
					goods_id: this.info.id,
				}).then(res => {
					var data = res.data;
					this.images = data.goods_image;
					this.content_images = data.content_images;
					this.info.name = data.name;
					this.info.price = data.price;
					this.info.tab_nav_id = data.tab_nav_id;
					this.tab_nav_name = data.tab_nav_name;
					this.info.profile = data.profile;
					this.info.express_type = data.express_type;
					this.info.stock = data.stock;
					this.info.reason_return = data.reason_return;
					if (data.tab_nav) {
						var list = data.tab_nav.split(',');
						list.forEach(element => {
							this.tab_nav.push(Number(element));
						})
					}
				});
			}
		},

		onLoad(option) {
			this.getProductTags();
			if (option.id) {
				this.info.id = option.id;
				this.getInfo();
			}
		},

		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
				if (e.scrollTop <= 100) {
					this.color = '#FFF';
				} else {
					this.color = '#999';
				}
			} else {
				this.trans = 1;
				this.color = '#333';
			}
		},
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #FFF;
	}

	.header {
		height: calc(340rpx + var(--paging-head-top));
		overflow: hidden;
		position: relative;

		.swiper-box {
			width: 100vw;
			height: calc(340rpx + var(--paging-head-top));

			swiper-item {
				width: 100vw;
				height: calc(340rpx + var(--paging-head-top));

				image {
					width: 100vw;
					height: calc(340rpx + var(--paging-head-top));
				}
			}
		}

		.swiper-dot {
			position: absolute;
			left: 32rpx;
			bottom: 32rpx;
			width: calc(100vw - 64rpx);
			align-items: flex-end;

			scroll-view {
				height: 140rpx;
			}

			.swiper-dot-flex-box {
				overflow: hidden;
				height: 140rpx;
				flex: 1;
			}

			#select {
				image {
					border: 4rpx solid #FD2A53;
				}
			}

			.swiper-dot-list {
				height: 140rpx;
				align-items: flex-end;
			}

			.item {
				margin-right: 16rpx;
				position: relative;

				.swiper-dot-icon {
					position: absolute;
					right: -16rpx;
					top: -16rpx;
				}

				image {
					width: 96rpx;
					height: 96rpx;
					border: 4rpx solid transparent;
					border-radius: 16rpx;
				}
			}

			.upload-images {
				width: 96rpx;
				height: 96rpx;
				background: #999999;
				border-radius: 16rpx;
				border: 4rpx solid #FFFFFF;
				box-sizing: content-box;
				margin: 0 24rpx 8rpx 0;
				justify-content: space-around;
				flex-shrink: 0;


				text {
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}

		}

	}

	#empty {
		background: rgba(0, 0, 0, .6);
	}

	.body {
		padding: 32rpx;
	}

	.title {
		margin-bottom: 32rpx;

		view {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
		}
	}

	.images_list {
		flex-wrap: wrap;

		.add {
			width: 216rpx;
			height: 216rpx;
			background: #F8F8F8;
			border-radius: 24rpx;
			margin: 0 8rpx;
		}

		.image_box {
			position: relative;
			width: 210rpx;
			height: 210rpx;
			margin: 0 8rpx 16rpx 8rpx;

			image {
				width: 210rpx;
				height: 210rpx;
				border-radius: 24rpx;
			}

			.delete_icon {
				position: absolute;
				right: 12rpx;
				top: 12rpx;
			}
		}
	}

	.goods_input {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		margin-top: 32rpx;
		padding: 0 32rpx;

		text {
			font-size: 28rpx;
			color: #131313;
			margin-right: 10rpx;
		}

		input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #131313;
		}

		.value {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #131313;
			padding-right: 12rpx;
		}

		.text {
			font-size: 28rpx;
			color: #131313;
			margin-left: 8rpx;
		}

		.select {
			flex-direction: row-reverse;
			flex: 1;

			.item {
				margin-left: 32rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 28rpx;
					color: #131313;
					line-height: 40rpx;
				}
			}
		}

	}

	.textarea {
		margin: 32rpx 0;
		background: #F8F8F8;
		border-radius: 16rpx;
		padding: 28rpx 32rpx;

		textarea {
			height: 240rpx;
		}

		.text_length {
			text {
				font-size: 32rpx;
				color: #999999;
			}

		}
	}

	button {
		margin-top: 72rpx;
		width: 560rpx;
		height: 96rpx;
		background: #FD2A53;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 96rpx;
	}
</style>